<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>缺陷跟踪</el-breadcrumb-item>
      <el-breadcrumb-item>新增缺陷</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-form :model="defectForm" :rules="defectFormRules" ref="defectFormRef" label-width="150px" class="defectForm">
        <el-form-item label="大修轮次" prop="outage">
          <el-select v-model="defectForm.outage" filterable placeholder="请选择大修轮次">
            <el-option v-for="outage in outagesList" :key="outage.id" :label="outage.outage" :value="outage.outage"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="主票工单" prop="main_order">
          <el-input v-model="defectForm.main_order"></el-input>
        </el-form-item>

        <el-form-item label="主票描述" prop="order_detail">
          <el-input v-model="defectForm.order_detail"></el-input>
        </el-form-item>

        <el-form-item label="缺陷描述" prop="defect_detail">
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 10 }" placeholder="请输入缺陷详细描述" v-model="defectForm.defect_detail">
          </el-input>
        </el-form-item>

        <el-form-item label="缺陷通知单" prop="defect_order">
          <el-input v-model="defectForm.defect_order"></el-input>
        </el-form-item>

        <el-form-item label="功能位置" prop="equipment">
          <el-input v-model="defectForm.equipment"></el-input>
        </el-form-item>

        <el-form-item label="缺陷日期" prop="defect_date">
          <el-date-picker v-model="defectForm.defect_date" align="right" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="责任部门" prop="deal_department">
          <el-select v-model="defectForm.deal_department" filterable allow-create default-first-option placeholder="请输入处理部门">
            <el-option v-for="department in departmentsList" :key="department.id" :label="department.name" :value="department.name"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="录入专业" prop="team">
          <el-select v-model="defectForm.team" filterable placeholder="请选择录入专业">
            <el-option v-for="team in teamsList" :key="team.id" :label="team.name" :value="team.name"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="createDefectBack">立即创建</el-button>
          <el-button @click="resetDefectForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defectForm: {
        outage: '',
        main_order: '',
        order_detail: '',
        defect_detail: '',
        defect_order: '',
        equipment: '',
        defect_date: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate(),
        deal_department: '',
        team: ''
      },
      defectFormRules: {
        outage: [{ required: true, message: '请输入大修轮次', trigger: 'blur' }],
        main_order: [
          { required: true, message: '请输入主票信息', trigger: 'blur' },
          { min: 12, max: 12, message: '主票长度为12位', trigger: 'blur' }
        ],
        order_detail: [{ required: true, message: '请输入主票工作内容', trigger: 'blur' }],
        defect_detail: [
          { required: true, message: '请输入缺陷描述', trigger: 'blur' },
          { min: 1, max: 1000, message: '最多输入1000个字', trigger: 'blur' }
        ],
        defect_order: [
          { required: true, message: '请输入缺陷通知单号', trigger: 'blur' },
          { min: 12, max: 12, message: '通知单长度为12位', trigger: 'blur' }
        ],
        equipment: [{ required: true, message: '请输入缺陷功能位置', trigger: 'blur' }],
        defect_date: [{ required: true, message: '请输入缺陷日期', trigger: 'blur' }],
        deal_department: [{ required: true, message: '请输入责任部门', trigger: 'blur' }],
        team: [{ required: true, message: '请选择发现专业', trigger: 'blur' }]
      },
      teamsList: [],
      outagesList: [],
      departmentsList: []
    }
  },
  created() {
    this.getBaseInfo()
  },
  methods: {
    //   获取选项基本信息
    async getBaseInfo() {
      const { data: res } = await this.$http.get('baseinfo/defectinfo/')
      if (res.meta.status !== 200) {
        return this.$message.error('获取添加缺陷的选项信息失败！')
      }
      this.teamsList = res.data.teams
      this.outagesList = res.data.outages
      this.departmentsList = res.data.departments
      console.log(res)
    },
    //   点击添加按钮
    async createDefectBack() {
      // console.log(this.defectForm)
      // 尚未验证表单是否valid
      const { data: res } = await this.$http.post('defect/adddefect/', this.defectForm)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.message)
      }
      this.$message.success('添加缺陷信息成功')
      this.$router.push('/defect')
    },

    //   重置defectForm
    resetDefectForm() {
      this.$refs.defectFormRef.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.defectForm {
  width: 50%;
  .el-select {
    width: 100%;
  }
  .el-date-editor {
    width: 100%;
  }
}
</style>
